<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>vue study</title>
	<script src="js/frame/vue2.0.js"></script>
</head>

<body>
	<div id="app1">
		<p>Original message: "{{message}}"</p>
		<!--<p>Computed reversed message: "{{reversedMessage}}"</p>-->
		<button v-on:click="reversedMessage">逆转消息</button>
	</div>

	<div id="app2">
		<span v-bind:title="message">
        v-bind指令:鼠标悬停查看动态绑定信息
      </span>
	</div>

	<div id="app3">
		<p v-if="seen">seen属性控制:现在你看到我了</p>
	</div>

	<div id="app4">
		<ol>
			<li v-for="todo in todos">{{todo.text}}</li>
		</ol>
	</div>

	<div id="app5">
		<p>{{message}}</p>
		<input type="text" v-model="message">
	</div>

	<div id="app6">
		<ol>
			<!--创建模板-->
			<todo-item v-bind:todo="item" v-for="item in groceryList"></todo-item>
		</ol>
	</div>


	<div id="app7">
		<p>Original message: "{{ message }}"</p>
		<p>Computed reversed message: "{{ reversedMessage }}"</p>
	</div>


	<div id="app8">
		{{fullName}}
	</div>

	<div id="app9">
		<p>{{firstName}}</p>
		<p>{{lastName}}</p>
		{{fullName}}
	</div>

	<ul id="app10">
		<!--<li v-for="item in items">{{item.message}}</li>-->
		<li v-for="(item,index) of items">{{parentMessage}}-{{index}}-{{item.message}}</li>
	</ul>

	<ul id="app11">
		<template v-for="(item,index) in items">
			<li>
				{{index}}-{{item.msg}}</li>
			<li class="divider">Template v-for</li>
		</template>
	</ul>

	<ul id="app12" class="demo">
		<li v-for="(value,key,index) in object">{{index}}--{{key}}:{{value}}</li>
	</ul>

	<div id="app13">
		<input v-model="newTodoText" v-on:keyup.enter="addNewTodo" placeholder="Add a todo">
		<ul>
			<li is="todo-item2" v-for="(todo,index) in todos" v-bind:title="todo" v-on:click="addAlert"></li>
		</ul>
	</div>


	<div id="app14">
		<ul>
			<li v-for="n in evenNumbers">{{n}}</li>
		</ul>
	</div>

	<div id="app15">
		<ul>
			<li v-for="n in even(numbers)">{{n}}</li>
		</ul>
	</div>

	<div id="app16">
		<button v-on:click="counter+=1">添加1</button>
		<p>这个按钮被点击了{{counter}}次</p>
	</div>

	<div id="app17">
		<button v-on:click="add">添加1</button>
		<p>将方法定义在methods中,这个按钮被点击了{{counter}}次</p>
	</div>

	<button id="app18" v-on:click="warn(msg,$event)">submit</button>

	<div id="app19">
		<p style="white-space: pre">{{ message }}</p>
		<br>
		<textarea v-model="message" placeholder="add multiple lines"></textarea>
	</div>

	<div id="app20">
		<input type="checkbox" id="apple" value="apple" v-model="checkedNames">
		<label for="apple">apple</label>
		<input type="checkbox" id="apple1" value="apple1" v-model="checkedNames">
		<label for="apple">apple1</label>
		<input type="checkbox" id="apple2" value="apple2" v-model="checkedNames">
		<label for="apple">apple2</label>
		<br>
		<label for="checkbox">checkedNames:{{checkedNames}}</label>
	</div>

	<div id="app21">
		<input type="radio" id="one" value="One" v-model="picked">
		<label for="one">One</label>
		<br>
		<input type="radio" id="two" value="Two" v-model="picked">
		<label for="two">Two</label>
		<br>
		<label for="radio">picked:{{picked}}</label>
	</div>

	<div id="app22">
		<select name="" id="" v-model="selected">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </select>
		<span>Selected:{{selected}}</span>
	</div>

	<div id="app23">
		<select name="" id="" multiple style="width:50px" v-model="selected">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </select>
		<br>
		<span>Selected:{{selected}}</span>
	</div>

	<div id="app24">
		<select name="" id="" v-model="selected">
        <option v-bind:value="option.value" v-for="option in options">
          {{option.text}}
        </option>
      </select>
		<span>Selected:{{selected}}</span>
	</div>

	<div id="app25">
		<simplecounter></simplecounter>
		<simplecounter></simplecounter>
		<simplecounter></simplecounter>
		<!--<simple-counter></simple-counter>
      <simple-counter></simple-counter>
      <simple-counter></simple-counter>-->
	</div>

	<div id="app26">
		<child message="hello!"></child>
	</div>

	<div id="app27">
		<input type="text" v-model="parentMsg"><br>
		<child :my-message="parentMsg"></child>
	</div>

	<div id="app28">
		<p>{{total}}</p>
		<button-counter v-for="totalNum in totalArrs" v-bind:total-number="totalNum" v-on:increment="incrementTotal"></button-counter>
	</div>

	<div id="app29">
		<currency-input v-model="price"></currency-input>
	</div>

	<div id="app30">
		<task>做作业</task>
		<task>写报告</task>
		<task>读书</task>
		<task>打扫</task>
		<task></task>
	</div>

	<div id="app31">
		<tasklist></tasklist>
	</div>
	<div id="app32">
		<message>
			<template slot="title">
				欢迎
			</template>
			<template>
				你好,vue2
			</template>
		</message>
	</div>

	<div id="app33">
		<message title1="欢迎" body1="你好,vue2,这是组件内部通讯"></message>
	</div>


	<div id="app34">
		<button class="button is-primary" @click="show()">显示</button>
		<!--<zen-modal v-if="showModal" @fireclose="showModal = false"></zen-modal>-->
		<zen-modal v-if="showModal" @click.native="fireclose()"></zen-modal>
	</div>

	<script>
		var vm_app34 = new Vue({
			el: '#app34',
			data() {
				return {
					showModal: false
				}
			},
			methods: {
				show() {
					this.showModal = true
				},
				fireclose() {
					this.showModal = false
				}
			},
			components: {
				"zen-modal": {
					template: `
              <div className="modal is-active">
                <div className="modal-background"></div>
                <div className="modal-content">
                  <div className="box">
                    <slot>默认模态框组件内容</slot>
                  </div>
                </div>
                <button class="modal-close" @click="$emit('fireclose')">关闭模态框</button>
              </div>
            `,
					// methods: {
					//   fireclose() {
					//     this.showModal = false
					//   }
					// }
				}
			}
		})


		var vm_app33 = new Vue({
			el: '#app33',
			components: {
				"message": {
					props: ["title1", "body1"],
					template: `<article class="message" v-show="inVisible">
                          <div class="message-header">
                            {{title1}}
                            <button class="delete" @click="hideMessage">props传递数据</button>
                          </div>
                          <div class="message-body">
                            {{body1}}
                          </div>
                        </article>`,
					data() {
						return {
							inVisible: true
						}
					},
					methods: {
						hideMessage() {
							this.inVisible = false
						}
					}
				}
			}
		})


		var vm_app32 = new Vue({
			el: "#app32",
			components: {
				"message": {
					template: `
              <article class="message" v-show="isVisible">
                <div class="message-header">
                  <slot name="title">默认标题</slot>
                  <button class="delete" @click="hideMessage">solt传递数据</button>
                </div>
                <div class="message-body">
                  <slot></slot>
                </div>
              </article>`,
					data() {
						return {
							isVisible: true
						}
					},
					methods: {
						hideMessage: function () {
							this.isVisible = false
						}
					}
				}
			}
		})

		Vue.component('tasklist', {
			template: `<div>
                      <task v-for="task in tasks">{{task.description}}</task>
                    </div>`,
			data() {
				return {
					tasks: [{
						description: "编程",
						uncompleted: true
					}, {
						description: "锻炼",
						uncompleted: false
					}, {
						description: "阅读",
						uncompleted: true
					}, {
						description: "睡觉",
						uncompleted: false
					}]
				}
			}
		})

		Vue.component('task', {
			template: '<li><slot>默认内容</slot></li>'
		})
		var vm_app31 = new Vue({
			el: '#app31',
		})
		var vm_app30 = new Vue({
			el: "#app30",
		})

		var vm_app29 = new Vue({
			el: '#app29',
			data() {
				return {
					price: 0
				}
			},
			components: {
				"currency-input": {
					template: '<span>$<input ref="input" v-bind:value="value" v-on:input="updateValue($event.target.value)"></span>',
					props: ["value"],
					methods: {
						// 此方法对输入值进行格式化限制
						updateValue: function (value) {
							var resultValue = value.trim().slice(0, value.indexOf('.') + 3);
							// var resultValue = value.trim().slice(0, value.indexOf('.' + 3));
							// 如果值不统一则将值传给子组件input
							if (resultValue !== value) {
								this.$refs.input.value = resultValue
							}
							this.$emit('input', Number(resultValue))
						}
					}
				}
			}
		})
		// 测试新插件修改了markdown，按照插
		var vm_app28 = new Vue({
			el: '#app28',
			data() {
				return {
					total: 0,
					totalArrs: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
				}
			},
			methods: {
				incrementTotal: function () {
					this.total += 1;
				}
			},
			components: {
				"button-counter": {
					props: ["totalNumber"],
					template: '<button v-on:click="increment">{{totalNumber}}</button>',
					// data() {
					//   return {
					//     counter: 0
					//   }
					// },
					methods: {
						increment: function () {
							this.counter += 1;
							this.$emit('increment')
						}
					}
				}
			}
		})


		var vm_app27 = new Vue({
			el: '#app27',
			data() {
				return {
					parentMsg: ''
				}
			},
			components: {
				child: {
					props: ['myMessage'],
					template: '<span>{{myMessage}}</span>',
					computed: {
						normalizedSize: function () {
							this.myMessage = this.myMessage.split("").reverse().join("")
						}
					}
				}
			}
		})

		var vm_app26 = new Vue({
			el: '#app26',
			components: {
				child: {
					props: ['message'],
					template: '<span>{{message}}</span>'
				}
			}
		})

		var vm_app25 = new Vue({
			el: '#app25',
			components: {
				"simplecounter": {
					template: '<button v-on:click="counter+=1">{{counter}}</button>',
					data: function () {
						return {
							counter: 0
						}
					}
				}
			}
		})

		var vm_app24 = new Vue({
			el: '#app24',
			data() {
				return {
					selected: "A",
					options: [{
						text: 'one',
						value: 'A'
					}, {
						text: 'two',
						value: 'B'
					}, {
						text: 'three',
						value: 'C'
					}, ]
				}
			},

		})

		var vm_app23 = new Vue({
			el: '#app23',
			data() {
				return {
					selected: []
				}
			}
		})



		var vm_app22 = new Vue({
			el: '#app22',
			data() {
				return {
					selected: null
				}
			}
		})


		var vm_app21 = new Vue({
			el: '#app21',
			data() {
				return {
					picked: ''
				}
			}
		})

		var vm_app20 = new Vue({
			el: "#app20",
			data() {
				return {
					checkedNames: []
				}
			}
		})

		var vm_app19 = new Vue({
			el: '#app19',
			data() {
				return {
					message: ''
				}
			}
		})

		var vm_app18 = new Vue({
			el: '#app18',
			data() {
				return {
					msg: "你好"
				}
			},
			methods: {
				warn: function (message, event) {
					console.log(message + event)
				}
			}
		})

		var vm_app17 = new Vue({
			el: "#app17",
			data() {
				return {
					counter: 0
				}
			},
			methods: {
				add: function () {
					this.counter = this.counter + 1
				}
			}
		})

		var vm_app16 = new Vue({
			el: "#app16",
			data() {
				return {
					counter: 0
				}
			}
		})


		var vm_app14 = new Vue({
			el: "#app14",
			data() {
				return {
					numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9]
				}
			},
			computed: {
				evenNumbers: function () {
					return this.numbers.filter(function (number) {
						return number % 2 === 0
					})
				}
			}
		})

		var vm_app15 = new Vue({
			el: '#app15',
			data() {
				return {
					numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9]
				}
			},
			methods: {
				even: function (numbers) {
					return numbers.filter(function (number) {
						return number % 2 === 0
					})
				}
			}
		})


		var vm_app13 = new Vue({
			el: '#app13',
			data() {
				return {
					newTodoText: '',
					todos: [
						"第一行",
						"第二行",
						"第三行",
					]
				}
			},
			methods: {
				addNewTodo: function () {
					this.todos.push(this.newTodoText)
					this.newTodoText = " "
				},
				addAlert: function () {
					alert("1111");
				}
			},
			components: {
				"todo-item2": {
					template: '\
          <li>\
            {{title}}\
               <button v-on:click="$emit(\'click\')">X</button>\
          </li>\
        ',
					props: ['title']
				}
			}
		})





		var vm_app12 = new Vue({
			el: '#app12',
			data() {
				return {
					object: {
						FirstName: 'zhang',
						LastName: 'haoran',
						Age: '24',
					}
				}
			}
		})

		var vm_app11 = new Vue({
			el: '#app11',
			data() {
				return {
					items: [{
						msg: '模板渲染第一行'
					}, {
						msg: '模板渲染第二行'
					}, {
						msg: '模板渲染第三行'
					}, {
						msg: '模板渲染第四行'
					}, {
						msg: '模板渲染第五行'
					}, ]
				}
			}
		})


		var vm_app10 = new Vue({
			el: "#app10",
			data() {
				return {
					parentMessage: 'Parent',
					items: [{
						message: "11111"
					}, {
						message: "22222"
					}]
				}
			}
		})



		//Watch
		var vm_app9 = new Vue({
			el: "#app9",
			data: {
				firstName: "Foo",
				lastName: 'Bar',
				// fullName: 'Foo Bar33333333'
			},
			computed: {
				// fullName: function () {
				//   return this.firstName + ' ' + this.lastName
				// },
				//set可以相应的更新对应的firstName值
				fullName: {
					get: function () {
						return this.firstName + ' ' + this.lastName
					},
					set: function (newValue) {
						var names = newValue.split(" ")
						this.firstName = names[0]
						this.lastName = names[names.length - 1]
					}
				}
			}
			// //添加监听器,firstName或者lastName属性改变时改变相应的值
			// watch: {
			//   firstName: function (val) {
			//     this.fullName = val + '' + this.lastName
			//   },
			//   lastName: function (val) {
			//     this.fullName = val + '' + this.firstName
			//   },
			// }
		})




		//Watch
		var vm_app8 = new Vue({
			el: "#app8",
			data: {
				firstName: "Foo",
				lastName: 'Bar',
				fullName: 'Foo Bar33333333'
			},
			//添加监听器,firstName或者lastName属性改变时改变相应的值
			watch: {
				firstName: function (val) {
					this.fullName = val + '' + this.lastName
				},
				lastName: function (val) {
					this.fullName = val + '' + this.firstName
				},
			}
		})


		//计算属性
		var vm_app7 = new Vue({
			el: '#app7',
			data() {
				return {
					message: '计算属性原始值'
				}
			},
			computed: {
				reversedMessage: function () {
					return this.message.split('').reverse().join('')
				}
			}
		})

		//定义一个todo-item的组件
		Vue.component("todo-item", {
			props: ['todo'], //添加一个自定义属性名为todo
			template: '<li>{{todo.text}}</li>'
		})
		var vm_app6 = new Vue({
			el: '#app6',
			data() {
				return {
					groceryList: [{
						text: '组件创建todo属性与template模板'
					}, {
						text: '实例化vue对象,利用v-bind:todo指向item,然后用v-for让item去遍历groceryList'
					}, {
						text: '完成模板渲染'
					}]
				}
			}
		})


		var vm_app5 = new Vue({
			el: '#app5',
			data() {
				return {
					message: "v-model完成数据双向绑定"
				}
			}
		})

		var vm_app4 = new Vue({
			el: "#app4",
			data() {
				return {
					todos: [{
						text: "第一行v-for渲染"
					}, {
						text: "第二行v-for渲染"
					}, {
						text: "第三行v-for渲染"
					}]
				}
			}
		})


		var vm_app3 = new Vue({
			el: '#app3',
			data() {
				return {
					seen: true
				}
			}
			// data: {
			//   seen: true
			// }
		})


		var vm_app1 = new Vue({
			el: "#app1",
			data() {
				return {
					message: '{{messsage}} 声明式渲染'
				}
			},
			methods: {
				reversedMessage: function () {
					this.message = this.message.split('').reverse().join("")
				}
			}
		})


		var vm_app2 = new Vue({
			el: "#app2",
			data() {
				return {
					message: '页面加载于' + new Date()
				}
			}
		})
	</script>
</body>

</html>